<template>
  <view>
    <view v-if="!address" class="btn">
      <button @click="btnAddress">选择地址</button>
    </view>
    <view v-else class="address">
      <view class="detail-address">
        {{ detailAddress }}
      </view>
      <view class="detail-user">
        <view class="userName">{{ address.userName }}</view>
        <view class="telNumber">{{ address.telNumber }}</view>
      </view>
    </view>

    <!-- 间隔槽开始 -->
    <u-gap height="30" bg-color="#f9f9f9"></u-gap>
    <!-- 间隔槽结束-->
  </view>
</template>

<script>
export default {
  data() {
    return {
      //用户地址
      address: null,
    };
  },
  //函数
  methods: {
    async btnAddress() {
      const [err, res] = await uni.chooseAddress();
      this.address = res;
      console.log(res);
    },
  },
  //计算属性
  computed: {
    detailAddress() {
      if (!this.address) return null;
      const { provinceName, cityName, countyName, detailInfo } = this.address;
      return provinceName + cityName + countyName + detailInfo;
    },
  },
};
</script>

<style lang="scss">
.btn {
  height: 187rpx;
  line-height: 187rpx;
  width: 100%;
  padding: 39rpx;
  button {
    width: 303rpx;
    height: 89rpx;
    line-height: 89rpx;
    border-radius: 30rpx;
    background-color: #fff;
    border: 1px solid $themeColor;
    color: $themeColor;
  }
}
.address {
  padding: 20rpx;
  .detail-address {
    font-size: 30rpx;
    font-weight: 700;
    margin-bottom: 20rpx;
  }
  .detail-user {
    display: flex;
    justify-content: space-between;
  }
}
</style>